<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org/">
<head th:replace="page/index::head">

</head>
<body class="layui-layout-body layuimini-all">
<div class="layui-layout layui-layout-admin">

    <div class="layui-header header" th:replace="page/index::nav">
    </div>

    <div class="layui-side layui-bg-black" th:replace="page/index::left">
    </div>

    <div class="layui-body">
        <div class="layuimini-content-page">
            <!--初始化中间内容-->

            <div class="layuimini-container layui-anim layui-anim-upbit ">
                <div class="layuimini-main content">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 40px;">
                        <legend th:text="${username}">表单集合演示</legend>
                    </fieldset>

                    <form class="layui-form layui-input-block" method="post" th:action="@{/integration/addRecord}" action="">
                        <input type="hidden" name="username" th:value="${username}" value="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品类别</label>
                            <div class="layui-input-inline">
                                <select id="categoryId"  lay-verify="required" name="categoryId" lay-filter="categoryId">
                                    <option th:each="category:${categoryList}" th:value="${category.categoryId}"
                                            th:text="${category.categoryName}" value="0">-------请选择------</option>
                                </select>
                            </div>
                            <label class="layui-form-label">商品名称</label>
                            <div class="layui-input-inline">
                                <select id="productName" name="productName" lay-verify="required"
                                        lay-filter="productName">
                                    <option >-----请选择----</option>
                                </select>
                            </div>
                            <label class="layui-form-label">单商品积分</label>
                            <div class="layui-input-inline">
                                <input id="pScore" type="text" class="layui-input " value="0" name="productScore" readonly="readonly"
                                       lay-verify="required" lay-filter="pScore">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">商品数量</label>
                            <div class="layui-input-inline">
                                <input id="pCount" type="text" class="layui-input " value="0" name="quantity"
                                       lay-verify="required">
                            </div>
                            <label class="layui-form-label">本次总积分</label>
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input " id="integralSum" value="0" name="integralSum" readonly="readonly"
                                       lay-verify="required">
                            </div>
                        </div>

                        <div class="layui-form-item">

                            <button style="left:460px;padding-top: 4px;position: absolute"
                                    class="layui-btn layui-btn-danger" type="submit" lay-submit="">
                                提交
                            </button>
                        </div>

                    </form>
                    <!--错误提示信息-->
                    <p class="errorMag" style="width: 318.4px;height: 30px;text-align: center;color: crimson" th:text="${errorMsg}"></p>
                </div>
            </div>
        </div>
    </div>

</div>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" src="../../static/lib/jquery-3.4.1/jquery-3.4.1.min.js"
        charset="utf-8"></script>
<script th:src="@{/lib/layui-v2.5.5/layui.js}" src="../../static/lib/layui-v2.5.5/layui.js?v=1.0.4"
        charset="utf-8"></script>
<script th:src="@{/lib/layui-v2.5.5/layui.all.js}" src="../../static/lib/layui-v2.5.5/layui.js?v=1.0.4"
        charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" src="../../static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/javascript">
    var form;
    layui.use(['layer', 'layuimini'], function () {
        $('.login-out').on("click", function () {
            layer.msg('正在退出登录', function () {
                window.location = '/user/logout';
            });
        });
        /* layuimini.listen();*/
    });
    layui.use(['jquery','form','layer'],function () {
        var $ = layui.$ //重点处
            ,layer = layui.layer;
       form = layui.form;
       form.on('select(categoryId)',function () {
           var categoryId = $("select[name='categoryId']").val();

           $.get("/integration/get_productName",{categoryId:categoryId},function (result) {
               result=result.data+"";
               var arr=new Array();
               arr=result.split(",");
               $("#productName").html('');
               for (var i = 0; i < arr.length; i++) {
                   $("#productName").append('<option>'+arr[i]+'</option>');
               }
               form.render();
           });
       });

        form.on('select(productName)',function () {
            var productName = $("select[name='productName']").val();
           // console.log('productName='+productName);
            $.get("/integration/get_productScore",{productName:productName},function (result) {
               console.log(result.data);
               $("#pScore").val(result.data);
            });

        });
        $("#pCount").blur(function () {
           var pcount = $("#pCount").val();
          // alert(pcount);
           var pscore = $("#pScore").val();
         //  alert(pscore);
           $("#integralSum").val(pcount*pscore);
        })


    });

    /*头像上传*/
    $(".uploadAvatar").click(function () {
        layer.open({
            type: 1
            , title: '上传头像' //不显示标题栏
            , closeBtn: 2
            , area: '300px;'
            , id: 'upload-avatar' //设定一个id，防止重复弹出
            , resize: false
            , btnAlign: 'c'
            , moveType: 1 //拖拽模式，0或者1
            , content: $(".magt3")

        });
        layui.use('upload', function () {
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#test1'
                ,auto:true

                , url: '/user/projectPictureUpload'
                , method: 'post'
                , accept: 'images'
                , acceptMime: 'image/*'
                , field: 'projectImg'
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $("#demo1").attr('src',result);
                    })}
                , done: function (res) {
                    //如果上传失败
                    if (res.status == 1) {
                        return layer.msg('上传项目图片失败', {icon: 5});
                    }
                    //上传成功,获得图片地址
                    console.log(res.data);

                    $('.avatar').attr('src', res.data);
                    layer.closeAll();
                    // window.location.reload();
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    });

</script>
</body>


<!--上传头像框-->
<div class="layui-form layui-form-item magt3">

    <div class="layui-upload">
        <button type="button" class="layui-btn" style="margin-left: 100px;" id="test1">选择图片</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1" style="margin-left:80px;width: 140px;height: 115px;">
            <p id="demoText"></p>
        </div>

    </div>

</div>

</html>